<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="get">get</button>
    <button class="post">post</button>
</body>
<script>
    var getBtn = document.getElementsByClassName("get")[0];
    var postBtn = document.getElementsByClassName("post")[0];

    getBtn.onclick = function () {
        var wd = ""; //全局变量  记录搜索的关键词   "" => 默认查询所有数据
        var col = "id"; // 全局变量  按哪个数据排序  默认按id排序
        var type = "asc"; //  全局变量  排序方式   默认升序
        var page = 1;   // 全局变量  记录页码(默认显示第一页)
        var size = 5;   // 全局变量  记录每页显示几条数据

        // debugger;

        // 回调函数 -> 把函数作为参数传到另一个函数中 让它在另一个函数中执行

        get({
            url: "http://43.138.81.225/demo/php/searchGoodsOrderLimit.php",
            data: `wd=${wd}&col=${col}&type=${type}&page=${page}&size=${size}`,
            // async:true,
            dataType: "json",
            success: function (res) {
                console.log("请求成功", res);
            }
        })

        page++;
        get({
            url: "http://43.138.81.225/demo/php/searchGoodsOrderLimit.php",
            data: {
                wd: wd,
                col,
                type,
                page: page,
                size,
            },
            // async:true,
            dataType: "json",
            success: function (res) {
                console.log("请求成功", res);
            }
        })
    }


    postBtn.onclick = function () {
        var acccount = "a123123";
        var pwd = "123123";

        post({
            url: "http://43.138.81.225/demo/php/login_account.php",
            data: {
                account: acccount,
                pwd,
            },
            async: true,
            dataType: "json",
            success: function (res) {
                console.log("请求成功", res);
            }

        })
    }


    // 缺点:
    // 1. 多参数传参讲究一一对应  -> 五个参数万一有一个参数没对上 -> 有问题!!!
    //                               即便参数有默认值 -> 也不能省略(省略了就对不上了)

    // 优化:有什么方法可以让参数排名不分先后,而且对每一个参数都有较为详细的描述  =>  传入一个对象作为参数  

    // 2.  传入数据时还需要自己手动拼接  => 发现参数数据队列 (`wd=${wd}&col=${col}&type=${type}&page=${page}&size=${size}`) 也是以键值对象形式存在, 排名不分先后  

    // 优化: 可以传入一个对象作为参数  => 在函数中将对象解析为参数数据队列   {wd,col,type,page,size}


    // options中的参数:
    // url      string         请求的地址
    // data     string|object  请求携带的数据(默认""   可以传入)
    // async    boolean        是否异步(默认异步)
    // dataType string         接口返回数据类型 (默认text)
    // success  function       请求成功时执行的回调函数 -> 回调函数中有一个形参(接收请求成功时的数据)

    function get(options) { // 传入一个对象作为参数  {url, data = "", async = true, dataType = "text", success}

        var { url, data = "", async = true, dataType = "text", success } = options;


        var xhr = new XMLHttpRequest();

        // 如果data传入的是一个纯对象  -> 将其解析为参数数据队列
        if (Object.prototype.toString.call(data) == "[object Object]") {
            var list = [];
            for (var key in data) {    // key => "user"
                var val = data[key];  // "a123123"
                var str = key + "=" + val;  // "user=a123123"
                list.push(str);
            }
            // console.log(list);

            data = list.join("&");
        }


        // ajax get传参 => 将参数数据队列拼接到请求地址之后,用?分隔

        xhr.open("get", data ? url + "?" + data : url, async);

        xhr.send();

        xhr.onreadystatechange = function () {
            // debugger;
            // 2 3 4
            if (xhr.readyState == 4 && xhr.status == 200) {
                var result = xhr.responseText;
                // console.log("请求成功", result);

                if (dataType == "json") {
                    result = JSON.parse(result);
                }
                // console.log(result);

                // 请求不同的接口 => 接口响应结果也是不一样的 -> 不能把拿到数据之后执行的内容定死  => 写活?

                if (success) {
                    success(result);
                }


            }
        }
    }



    function post(options) { // 传入一个对象作为参数  {url, data = "", async = true, dataType = "text", success}

        var { url, data = "", async = true, dataType = "text", success } = options;


        var xhr = new XMLHttpRequest();

        // 如果data传入的是一个纯对象  -> 将其解析为参数数据队列
        if (Object.prototype.toString.call(data) == "[object Object]") {
            var list = [];
            for (var key in data) {    // key => "user"
                var val = data[key];  // "a123123"
                var str = key + "=" + val;  // "user=a123123"
                list.push(str);
            }
            // console.log(list);

            data = list.join("&");
        }


        // ajax get传参 => 将参数数据队列拼接到请求地址之后,用?分隔
        xhr.open("post", url, async);

        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(data);

        xhr.onreadystatechange = function () {
            // debugger;
            // 2 3 4
            if (xhr.readyState == 4 && xhr.status == 200) {
                var result = xhr.responseText;
                // console.log("请求成功", result);

                if (dataType == "json") {
                    result = JSON.parse(result);
                }
                // console.log(result);

                // 请求不同的接口 => 接口响应结果也是不一样的 -> 不能把拿到数据之后执行的内容定死  => 写活?

                if (success) {
                    success(result);
                }


            }
        }
    }


</script>




</html>